<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>求职者注册</title>
		<%@include file="/view/common/js-css.jsp" %>
	</head>
	<body>
		<!-- 登录失败后的页面显示 -->
		<c:if test="${!empty requestScope.talent }">
			<div class="alert alert-danger alert-dismissible fade in" role="alert" style="text-align: center;">
		       <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
		       <strong>求职者注册失败！</strong>
			</div>
		</c:if>
		
		<center><h1>求职者注册</h1></center>
		<hr>
		
		<form action="<%=request.getContextPath() %>/TalentServlet?command=register"
		 method="post" onsubmit="return validate();">
		  <div class="form-group">
		    <input type="text" class="form-control" id="code" name="code" placeholder="帐号..." 
		    autofocus="autofocus" value="${requestScope.talent.code }">
		    <span id="codeInfo"></span>
		  </div>
		  <div class="form-group">
		    <input type="password" class="form-control" id="password" name="password" placeholder="密码...">
		    <span id="passwordInfo"></span>
		  </div>
		  <div class="form-group">
		    <input type="password" class="form-control" id="rePassword" name="rePassword" placeholder="确认密码...">
		    <span id="rePasswordInfo"></span>
		  </div>
		  <div class="form-group">
		    <input type="text" class="form-control" id="name"  name="name" placeholder="姓名..." value="${requestScope.talent.name }">
		    <span id="nameInfo"></span>
		  </div>
		  <div class="form-group">
		    <input type="text" class="form-control" id="phone" name="phone" placeholder="电话..." value="${requestScope.talent.phone }">
		    <span id="phoneInfo"></span>
		  </div>
		  <div class="form-group">
		    <input type="text" class="form-control" id="email" name="email" placeholder="邮箱..." value="${requestScope.talent.email }">
		    <span id="emailInfo"></span>
		  </div>
		  <div class="form-group">
		  	 <select class="form-control" id="age" name="age" >
		  	 	<option value="">-请选择年龄-</option>
		  	 	<script>
		  	 		for (var i = 16; i <= 65; i++) {
		  	 			// 如果要在JS代码上写EL，这个JS代码就必须要写在JSP页面上并且EL还得使用引号，不能使用外部引入！
		  	 			var age = '${requestScope.talent.age }';
		  	 			if (i == age) {
			  	 			document.write('<option selected="selected">' + i + '</option>');
		  	 			} else {
			  	 			document.write('<option>' + i + '</option>');
		  	 			}
		  	 		}
		  	 	</script>
		  	 </select>
		    <span id="ageInfo"></span>
		  </div>
		  <div class="radio">
		  	<c:if test="${requestScope.talent.gender == 1 || empty requestScope.talent}">
			    <label>
			      <input type="radio" name="gender" value="1" checked="checked"> 男
			    </label>
			    <label>
			      <input type="radio" name="gender" value="2"> 女
			    </label> 
		  	</c:if>
		  	<c:if test="${requestScope.talent.gender == 2}">
			    <label>
			      <input type="radio" name="gender" value="1"> 男
			    </label>
			    <label>
			      <input type="radio" name="gender" value="2" checked="checked"> 女
			    </label>
		    </c:if>
		  </div>
		  <div class="checkbox">
			  <label>
			    <input type="checkbox" name="hobby" value="编程">编程
			  </label>
			  <label>
			    <input type="checkbox" name="hobby" value="看书">看书
			  </label>
			  <label>
			    <input type="checkbox" name="hobby" value="旅游">旅游
			  </label>
			  <label>
			    <input type="checkbox" name="hobby" value="相亲">相亲
			  </label>
		  </div>
		  <input type="submit" class="btn btn-primary" value="注册">
		  <input type="button" class="btn btn-success" onclick="location='<%=request.getContextPath() %>/view/talent/login.jsp'" value="已有帐号?"/>
		</form>
		
		<script>
			/**
			 *  checkbox回显
			 */
			var hobby = '${requestScope.talent.hobby}'; // 旅游|看书
			if (hobby && '${requestScope.talent}') {
				var hobbies = hobby.split('|');
				var allHobbies = document.getElementsByName('hobby');
				/*
				for (var i = 0; i < hobbies.length; i++) {
					for (var j = 0; j < allHobbies.length; j++) {
						if (hobbies[i] == allHobbies[j].value) {
							allHobbies[j].checked = true;
						}
					}
				}
				*/
				
				$(":checkbox").val(hobbies);
			}
			/**
			 * 操作提示
			 */
			 if ('${result}' === '1' || '${param.result}' === '1') {
				 layer.msg('操作成功~', {icon : 1}); 
			 }
			 if ('${result}' === '0' || '${param.result}' === '0') {
				 layer.msg('操作失败~', {icon : 2}); 
			 }
			/**
			* 表单验证
			*/
			function validate () {
				var result =true;
				var codeDOM = document.getElementById('code');
				var passwordDOM = document.getElementById('password');
				var rePasswordDOM = document.getElementById('rePassword');
				var nameDOM = document.getElementById('name');
				var phoneDOM = document.getElementById('phone');
				var emailDOM = document.getElementById('email');
				var ageDOM = document.getElementById('age');
				if(codeDOM.value== '') {
					document.getElementById('codeInfo').innerHTML = '<font color="red">账号不能为空!</font>';
					result = false;
				} else {
					document.getElementById('codeInfo').innerHTML = '';
				}
				if(passwordDOM.value== '') {
					document.getElementById('passwordInfo').innerHTML = '<font color="red">密码不能为空!</font>';
					result = false;
				} else {
					document.getElementById('passwordInfo').innerHTML = '';
				}
				if(passwordDOM.value != rePasswordDOM.value) {
					document.getElementById('rePasswordInfo').innerHTML = '<font color="red">密码输入错误!</font>';
					result = false;
				} else {
					document.getElementById('rePasswordInfo').innerHTML = '';
				}
				if(nameDOM.value == '') {
					document.getElementById('nameInfo').innerHTML = '<font color="red">名字不能为空!</font>';
					result = false;
				} else {
					document.getElementById('nameInfo').innerHTML = '';
				}
				if(phoneDOM.value == '') {
					document.getElementById('phoneInfo').innerHTML = '<font color="red">电话不能为空!</font>';
					result = false;
				} else {
					document.getElementById('phoneInfo').innerHTML = '';
				}
				if(emailDOM.value == '') {
					document.getElementById('emailInfo').innerHTML = '<font color="red">邮箱不能为空!</font>';
					result = false;
				} else {
					document.getElementById('emailInfo').innerHTML = '';
				}
				if(ageDOM.value == '') {
					document.getElementById('ageInfo').innerHTML = '<font color="red">年龄不能为空!</font>';
					result = false;
				} else {
					document.getElementById('ageInfo').innerHTML = '';
				}
				return result; 
			}
		</script>
	</body>
</html>